<template>
	<div class="my">
		<div class="header mb_18">
			<div class="row-between-center infor">
				<div class="left">
					<h4 class="name">{{my.nickName?my.nickName:'巨幅中国'}}</h4>
					<p class="tag flex"><i class="icon_vip" v-if="my.vipState==1"></i> <span v-if="my.authenticationState==true">已认证</span></p>
				</div>
				<router-link tag="div" to="/Message" class="functions">
					<div class="right" v-if="my.avatarFile" :style="{backgroundImage:`url(${my.avatarFile.uriPath})`}"></div>
					<div class="right" v-else></div>
				</router-link>
			</div>
			<!-- v-if="my.avatarFile.uriPath" :style="{backgroundImage:`url(${my.avatarFile.uriPath})`}" -->
			<div class="row-between-center all_fun">
				<router-link tag="div" to="authen" class="functions">
					<div class="icon_rz"></div>
					<p>企业认证</p>
				</router-link>
				<router-link tag="div" to="/notice/list" class="functions">
					<div class="icon_notice"></div>
					<p>消息通知</p>
				</router-link>
				<router-link tag="div" to="/invoice/list" class="functions">
					<div class="icon_invoice"></div>
					<p>我的发票</p>
				</router-link>
			</div>
		</div>

		<div class="mb_18">
			<router-link tag="div" to="/invoice/head" style="width: 100%;background-color: white;">
				<van-cell is-link class="van-style">
					<template #title>
						<i class="icon_fapiao"></i>
						<span class="custom-title">发票抬头</span>
					</template>
				</van-cell>
			</router-link>

			<router-link tag="div" to="vip" style="width: 100%;background-color: white;">
				<van-cell is-link class="van-style">
					<template #title>
						<i class="icon_huiyuan"></i>
						<span class="custom-title">会员中心</span>
					</template>
				</van-cell>
			</router-link>

			<router-link tag="div" to="order" style="width: 100%;background-color: white;">
				<van-cell is-link class="van-style" style="border-bottom: none;">
					<template #title>
						<i class="icon_dingdan"></i>
						<span class="custom-title">订单进度</span>
					</template>
				</van-cell>
			</router-link>
			<!-- <router-link tag="div" to="">
        <van-cell is-link>
          <template #title>
            <i class="icon_taocan"></i>
            <span class="custom-title">我的套餐</span>
          </template>
        </van-cell>
      </router-link> -->
		</div>

		<!--  <router-link tag="div" to="" class="mb_18">
      <van-cell is-link>
        <template #title>
          <i class="icon_sao"></i>
          <span class="custom-title">扫一扫</span>
        </template>
      </van-cell>
    </router-link> -->

		<!--   <router-link tag="div" to="setting" class="mb_18">
      <van-cell value="0951-4545411">
        <template #title>
          <i class="icon_lianxi"></i>
          <span class="custom-title">联系我们</span>
        </template>
      </van-cell>
    </router-link> -->
		<div class="mb_18" style="width: 100%;background-color: white;">
			<van-cell value="0951-7677316" is-link url="tel:0951-7677316" class="van-style" style="border-bottom: none;">
				<template #title >
					<i class="icon_lianxi"></i>
					<span class="custom-title">联系我们</span>

				</template>
			</van-cell>
			<!-- <a href='tel:0951-4545411' style="float: right; font-size: 0.30rem;margin-top: -0.5rem;">15641187999</a> -->
		</div>
		<router-link tag="div" to="setting" style="width: 100%;background-color: white;">
			<van-cell is-link class="van-style" style="border-bottom: none;">
				<template #title>
					<i class="icon_shezhi"></i>
					<span class="custom-title">设置</span>
				</template>
			</van-cell>
		</router-link>
	</div>
</template>

<script>
	import api from 'api/api'
	export default {
		data() {
			return {
				my: {},
				vipflag: 0
			}
		},
		created() {
			this.getData()
		},
		methods: {
			getData() {
				api.myIndex().then(res => {
					console.log('resss', res)
					localStorage.setItem('my', JSON.stringify(res.data))
					this.my = res.data
				})
			},
			modify() {
				console.log('ff')
			}
		}
	}
</script>

<style lang="scss">
	.my {
		background-color: #f5f5f5;
		min-height: 100vh;
		text-align: left;

		.mb_18 {
			margin-bottom: 0.18rem;
		}

		.header {
			background-color: #fff;
			padding: 0.5rem 0.3rem;
		}

		.infor {
			padding-top: 0.5rem;
			margin-bottom: 0.64rem;

			.left {
				.name {
					font-size: 0.4rem;
					margin-bottom: 0.24rem;
				}

				.tag {
					align-items: center;
				}

				.icon_vip {
					width: 0.94rem;
					height: 0.44rem;
					background-image: url("../assets/img/my/VIP.png");
					background-size: 100%;
				}

				span {
					font-size: 0.22rem;
					color: #333;
					margin-left: 0.11rem;
				}
			}

			.right {
				width: 1.33rem;
				height: 1.33rem;
				background-image: url("../assets/img/my/touxaing-moren.png");
				background-size: 100%;
				border-radius: 50%;
			}
		}

		.all_fun {
			padding: 0 0.3rem;
		}

		.functions {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.icon_rz {
				width: 0.37rem;
				height: 0.43rem;
				background-image: url("../assets/img/my/rengzheng.png");
				background-size: 100%;
			}

			.icon_notice {
				width: 0.37rem;
				height: 0.43rem;
				background-image: url("../assets/img/my/tongzhi.png");
				background-size: 100%;
			}

			.icon_invoice {
				width: 0.47rem;
				height: 0.37rem;
				background-image: url("../assets/img/my/fapiao.png");
				background-size: 100%;
			}

			p {
				font-size: 0.3rem;
				text-align: center;
				margin-top: 0.2rem;
				font-weight: bold;
			}
		}

		.van-cell__title {
			display: flex;
			align-items: center;

			i {
				margin-right: 0.23rem;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}

			.custom-title {
				color: #666;
				font-weight: bold;
			}
		}

		.icon_fapiao {
			width: 0.36rem;
			height: 0.36rem;
			background-image: url("../assets/img/my/fptt.png");
		}

		.icon_huiyuan {
			width: 0.36rem;
			height: 0.36rem;
			background-image: url("../assets/img/my/hyzx.png");
		}
		
		.icon_dingdan {
			width: 0.36rem;
			height: 0.36rem;
			background-image: url("../assets/img/my/dingdan@3x.png");
		}

		.icon_taocan {
			width: 0.36rem;
			height: 0.36rem;
			background-image: url("../assets/img/my/taocan.png");
			background-size: contain;
		}

		.icon_sao {
			width: 0.36rem;
			height: 0.36rem;
			background-image: url("../assets/img/my/sys.png");
		}

		.icon_lianxi {
			width: 0.36rem;
			height: 0.36rem;
			background-image: url("../assets/img/my/lxwm.png");
		}

		.icon_shezhi {
			width: 0.36rem;
			height: 0.36rem;
			background-image: url("../assets/img/my/sz.png");
		}

		.van-cell {
			padding: 10px 0px !important;
		}

		.van-style {
			border-bottom: #E0E0E0 1px solid;
			width: 90%;
			margin: 0 auto;
		}
	
	}
</style>
